<template>
    <div id="orderList">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>我的订单</el-breadcrumb-item>
      </el-breadcrumb>
      <el-row class="content">
        <el-col :span="23">
          <el-table class="table" :data="tableData" border style="width: 100%">
            <el-table-column prop="orderNumber" label="订单号"></el-table-column>
            <el-table-column prop="apartmentName" label="别墅名"></el-table-column>
            <el-table-column prop="renderName" label="租房人"></el-table-column>
            <el-table-column prop="renderIdNumber" label="租房人身份证号"></el-table-column>
            <el-table-column prop="renderPhone" label="租房人手机号"></el-table-column>
            <el-table-column prop="renderEmail" label="租房人邮箱"></el-table-column>
            <el-table-column prop="startTime" label="开始时间"></el-table-column>
            <el-table-column prop="endTime" label="结束时间"></el-table-column>
          </el-table>
          <el-pagination
            @current-change="changePage"
            class="color"
            background
            layout="prev, pager, next"
            :page-size ="pageSize"
            :total="totalRow">
          </el-pagination>
        </el-col>
      </el-row>
    </div>

</template>

<script>
    export default {
      data() {
        return {
          tableData: [],
          totalRow: 0,
          pageSize: 10
        };
      },
      created() {
        this.getOrderList(1, this.pageSize);
      },
      methods: {
        changePage(currentPage) {
          this.getOrderList(currentPage, this.pageSize);
        },
        getOrderList(pageNum, pageSize) {
          this.$http.post('/api/host/order/getOrderListByHostId.do', this.$qs.stringify({
            'pageNum': pageNum || 1,
            'pageSize': pageSize || 10
          }))
            .then((response) => {
              let data = response.data;
              if (data.status === 0) {
                this.tableData = data.data.list;
                this.totalRow = data.data.total;
                this.pageSize = data.data.pageSize;
              } else {
                this.$message.error(data.msg);
              }
              console.log(data);
            })
            .catch(() => {
              this.$message.error('网络错误');
            });
        }
      }
    };
</script>

<style scoped>
  #orderList{
    line-height: 0;
  }
  #orderList .content{
    margin-top: 40px;
  }
  .el-pagination{
    margin-top: 20px;
  }
</style>
